<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>KPI管理页</title>
		<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../static/css/font.css">
		<link rel="stylesheet" href="../../static/css/weadmin.css">
		<style>
			select{
				width: 150px;
				color: #666;
				height: 38px;
			    line-height: 1.3;
			    border:1px solid #e6e6e6;
			    background-color: #fff;
			    border-radius: 2px;
			    padding-left: 5px;
			}
		</style>
	</head>

	<body>
		<div class="weadmin-nav">
			<span class="layui-breadcrumb" style="visibility: visible;">
		        <a href="">KPI管理</a>
		        <a>
	          		<cite>KPI设定</cite>
		        </a>
	      	</span>
			<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i>
			</a>
		</div>
		
		<div class="weadmin-body">
			<div class="weadmin-block">
				<div class="layui-inline">
					<a id="" class="layui-btn layui-btn-normal" onclick="WeAdminShow('设定KPI','./kpi-set-add.html')">添加</a>
				</div>
				<div style="margin-left:30px;" class="layui-inline">
					<select id="position_select" onchange="selectChange()" class="valid">
					</select>
				</div>
				<div style="margin-left:30px;" class="layui-inline">
					<select id="kpiItem_select" onchange="selectChange()" class="valid">
					</select>
				</div>
				<div style="margin-left:30px;" class="layui-inline">
					<select id="year_select" onchange="selectChange()" class="valid">
					</select>
				</div>
				<div style="margin-left:30px;" class="layui-inline">
					<select id="month_select" onchange="selectChange()" class="valid">
					</select>
				</div>
			</div>
			<!--  门店列表表格 -->
			<table class="layui-table" lay-filter="kpiSet_table" id="kpiSet_table" style="margin: 0"></table>
		</div>
		<script src="../../publicjs/jquery-1.8.0.min.js"></script>
		<script src="../../lib/layui/layui.js"></script>
		<script src="../../static/js/admin.js" charset="utf-8"></script>
		<script src="../../publicjs/smallkingutil.js"></script>
		<script>
			layui.use(['form', 'table'], function() {
				var table = layui.table;
				var form = layui.form;
				window.form = form;
				// 加载数据表格
				window.kpiSetTable = table.render({
					id: 'kpiSetTable',
					elem: '#kpiSet_table',
					url: commonUtil.domain() +'/admin/wxwork/kpi/set/list', // 数据接口
					method: 'get',
					page: true, // 开启分页
					request: {
						pageName: 'pageNum', // 分页当前页数发给后台的参数名
						limitName: 'pageSize' // 分页每页多少条发给后台的参数名
					},
					done:function(res){
						$('.layui-laypage-count').text('共'+res.total+'条')
					},
					cols: [
						[ //表头
						    {
								field: 'positionCode',
								title: '职位编号',
								width: 100
							},{
								field: 'positionName',
								title: '职位名称',
								width: 100
							},{
								field: 'kpiCodeRow',
								title: 'KPI编号(行)',
								width: 110
							},{
								field: 'kpiNameRow',
								title: 'KPI名称(行)',
								width: 110
							},{
								field: 'kpiCodeColumn',
								title: 'KPI编号(列)',
								width: 110
							},{
								field: 'kpiNameColumn',
								title: 'KPI名称(列)',
								width: 110
							},{
								field: 'defaultValue',
								title: '默认值',
								edit: 'text',
								width: 100
							},{
								field: 'year',
								title: '年',
								width: 70
							},{
								field: 'month',
								title: '月',
								width: 70
							},{ 
								field: 'createTime',
								title: '创建时间',
								width: 160
							},{ 
								field: 'updateTime',
								title: '修改时间',
								width: 160
							},{
								field: 'oper',
								title: '操作',
								width: 70,
								templet: '#oper'
							}
						]
					]
				});
				// 请求职位列表填充到下拉框
				var ajaxParam = {
					url: commonUtil.domain() + '/admin/wxwork/position/list'
				}
				ajaxUtil.post(ajaxParam, function(data) {
					data.data.unshift({positionCode:20000,positionName:'门店'})
					data.data.unshift({positionCode:10000,positionName:'大区'})
					data.data.unshift({positionCode:-1,positionName:'职位(全部)'})
					selectUtil.fillSelect($('#position_select'), data.data, "positionCode", "positionName");
				});
				// 请求kpi列表填充到下拉框
				var ajaxParam = {
					url: commonUtil.domain() + '/admin/wxwork/kpi/item/list?type=1'
				}
				ajaxUtil.post(ajaxParam, function(data) {
					data.data.unshift({kpiCode:-1,kpiName:'KPI(全部)'})
					selectUtil.fillSelect($('#kpiItem_select'), data.data, "kpiCode", "kpiName");
				});
				// 填充年月的下拉框
				var date=new Date;
				var year=date.getFullYear(); 
				var month=date.getMonth()+1;
				var yearData = [{value:-1,name:'年份(全部)'}];
				var monthData = [{value:-1,name:'月份(全部)'}];
				for(var i = 2010; i <= year; i ++){
					yearData.push({value:i,name:i});
				}
				for(var i = 1; i <= 12; i ++){
					monthData.push({value:i,name:i});
				}
				selectUtil.fillSelect($('#year_select'), yearData, "value", "name");
				selectUtil.fillSelect($('#month_select'), monthData, "value", "name");
				// 下拉框的onchange事件
				window.selectChange = function(res){
					var positionCode = $('#position_select option:selected').val();
					var kpiCodeRow = $('#kpiItem_select option:selected').val();
					var year = $('#year_select option:selected').val();
					var month = $('#month_select option:selected').val();
					var data = {};
					if(positionCode != -1){
						data.positionCode = positionCode;	
					}
					if(kpiCodeRow != -1){
						data.kpiCodeRow = kpiCodeRow;	
					}
					if(year != -1){
						data.year = year;	
					}
					if(month != -1){
						data.month = month;	
					}
					kpiSetTable.refresh(data);
				}
				// 刷新表格
				kpiSetTable.refresh = function(data) {
					kpiSetTable.reload({
						where: data,
						page: {
							curr: 1 //重新从第 1 页开始
						}
					});
				}
				// 监听表格修改
				table.on('tool(kpiSet_table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					  var data = obj.data; // 获得当前行数据
					  var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					  var tr = obj.tr; // 获得当前行 tr 的DOM对象
					  if(layEvent == 'delete'){ // 点击表格一行的移除按钮
							 layer.confirm("确定要删除此KPI设定吗？", function(index){
								// 发送ajax请求 删除地区
								var ajaxParam = {
									url : commonUtil.domain() + "/admin/wxwork/kpi/set/delete",//删除接口地址
									data : {
										id : data.id
									}
								}
								ajaxUtil.post(ajaxParam, function(){
									layer.closeAll();
									kpiSetTable.refresh();
								});
							 });
					  }
				});
				// 监听单元格编辑
				table.on('edit(kpiSet_table)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
				  var value = obj.value;
				  var id = obj.data.id;
				  var data = {
					 id: id,
					 defaultValue: value
				  }
				  console.info(data);
				  layer.confirm("确定将此KPI设定的默认值改成:" + value + "吗",function(res){
						// 发送ajax修改kpi默认值
						var ajaxParam = {
								url : commonUtil.domain() + '/admin/wxwork/kpi/set/update',
								data : data
							}
						ajaxUtil.post(ajaxParam, function(data) {
							if (data.code == 200) {
								layer.alert("修改成功", {
									icon : 6
								}, function() {
									kpiSetTable.refresh();
									layer.closeAll();
								});
							} else {
								layer.alert(data.msg);
							}
						});
				  });
				});
			});
		</script>
		<script type="text/html" id="show">
			{{# if(d.showOnHome == 1){ }}
			<span style="margin-left:18px;" class="layui-btn layui-btn-normal layui-btn-xs">是</span>{{# } else { }}
			<span style="margin-left:18px;" class="layui-btn layui-btn-normal layui-btn-xs layui-btn-disabled">否</span> {{# } }}		
		</script>
		<script type="text/html" id="oper">
		    <a title="删除" lay-event="delete"><i class="layui-icon">&#xe640;</i></a>
		</script>
	</body>

</html>